<section id="calendar_section" data-transition="cover">
    <header>
        <nav class="left">
            <a href="#" data-icon="undo" data-target="back">返回</a>
        </nav>
        <h1 class="title">日历</h1>
    </header>
    <article class="active" id="menu_article"  data-scroll="true">
        <button class="button" id="btn_popup_calendar" style="margin: 20px;">点击弹出日历</button>
        <div id="calendar_demo" style="margin:10px;">
        </div>
    </article>
    <script type="text/javascript">
    	$("#calendar_section").on("pageload", function(){
    		new J.Calendar('#calendar_demo',{
                onRenderDay : function(day,date){
                    if(day == 5){
                        return '<div>'+day+'</div><div style="font-size: .8em;color: red">威武</div>'
                    }
                    return day;
                },
                onSelect:function(date){
                    alert(date);
                }
            });
            $('#btn_popup_calendar').tap(function(){
                J.popup({
                    html : '<div id="popup_calendar"></div>',
                    pos : 'center',
                    backgroundOpacity : 0.4,
                    showCloseBtn : false,
                    onShow : function(){
                        new J.Calendar('#popup_calendar',{
                            date : new Date(2013,7,1),
                            onSelect:function(date){
                                $('#btn_popup_calendar').text(date);
                                J.closePopup();
                            }
                        });
                    }
                });
            });
    	})
    </script>
</section>
